<template>
  <div class="profile-container">
    <h2 class="gradient-text">企业信息中心</h2>

    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <el-icon><OfficeBuilding /></el-icon>
          <span class="gradient-text">企业信息</span>
          <el-button
              type="primary"
              size="small"
              @click="editCompanyInfo"
              class="edit-btn"
          >
            {{ isEditingCompany ? '保存' : '编辑' }}
          </el-button>
        </div>
      </template>

      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>

      <div v-else-if="companyInfo" class="company-info">
        <el-form ref="companyFormRef" :model="companyInfo" :disabled="!isEditingCompany" label-width="120px">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="companyInfo.companyName" />
          </el-form-item>

          <el-form-item label="公司地址" prop="companyAddress">
            <el-input v-model="companyInfo.companyAddress" />
          </el-form-item>

          <el-form-item label="公司类型" prop="companyType">
            <el-select v-model="companyInfo.companyType" placeholder="请选择公司类型" style="width: 100%">
              <el-option label="有限责任公司" value="有限责任公司" />
              <el-option label="股份有限公司" value="股份有限公司" />
              <el-option label="个人独资企业" value="个人独资企业" />
              <el-option label="合伙企业" value="合伙企业" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>

          <el-form-item label="法人姓名" prop="legalName">
            <el-input v-model="companyInfo.legalName" />
          </el-form-item>

          <el-form-item label="法人联系方式" prop="legalPhone">
            <template v-if="isEditingCompany">
              <el-input v-model="companyInfo.legalPhone" />
            </template>
            <template v-else>
              <el-input :value="maskPhone(companyInfo.legalPhone)" readonly />
            </template>
          </el-form-item>

          <el-form-item label="法人身份证号" prop="legalIdCard">
            <template v-if="isEditingCompany">
              <el-input v-model="companyInfo.legalIdCard" />
            </template>
            <template v-else>
              <el-input :value="maskIdCard(companyInfo.legalIdCard)" readonly />
            </template>
          </el-form-item>

          <el-form-item label="银行账户" prop="bankAccount">
            <template v-if="isEditingCompany">
              <el-input v-model="companyInfo.bankAccount" />
            </template>
            <template v-else>
              <el-input :value="maskBankAccount(companyInfo.bankAccount)" readonly />
            </template>
          </el-form-item>
        </el-form>
      </div>

      <el-empty v-else description="暂无企业信息" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { OfficeBuilding } from '@element-plus/icons-vue'
import { getCompanyInfo, updateCompanyInfo } from '@/api/company'

const loading = ref(false)
const companyInfo = ref(null)
const isEditingCompany = ref(false)
const companyFormRef = ref(null)

onMounted(() => {
  loadUserInfo()
})

const loadUserInfo = async () => {
  loading.value = true
  try {
    const response = await getCompanyInfo()
    companyInfo.value = response.data
  } catch (error) {
    console.error('加载信息失败:', error)
    ElMessage.error('获取企业信息失败')
  } finally {
    loading.value = false
  }
}

const editCompanyInfo = async () => {
  if (isEditingCompany.value) {
    try {
      await updateCompanyInfo(companyInfo.value)
      ElMessage.success('企业信息更新成功')
      isEditingCompany.value = false
    } catch (error) {
      ElMessage.error('更新企业信息失败')
    }
  } else {
    isEditingCompany.value = true
  }
}

const maskPhone = phone => phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
const maskIdCard = id => id ? id.replace(/(\d{4})\d{10}(\w{4})/, '$1**********$2') : ''
const maskBankAccount = acc => acc ? acc.replace(/(\d{4})\d+(\d{4})/, '$1********$2') : ''
</script>

<style scoped>
.profile-container {
  padding: 30px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 60px);
}

.info-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-header .el-icon {
  margin-right: 10px;
  color: #6a11cb;
}

.gradient-text {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-form-item__label {
  font-weight: 500;
  color: #5a5a5a;
}

.el-input, .el-select {
  border-radius: 8px;
}

.el-select :deep(.el-input__inner) {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.el-select :deep(.el-input__inner):focus {
  border-color: #6a11cb;
  box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.2);
}

.edit-btn {
  margin-left: auto;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  border: none;
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
}

.edit-btn:hover {
  background: linear-gradient(to right, #5a0db5, #1d6ae8);
}

.loading-container {
  padding: 30px 0;
}

.el-empty {
  padding: 40px 0;
}

.el-empty :deep(.el-empty__description) {
  color: #909399;
}
</style>